<template>
	<view class="login-container">
		<view class="">
			<view class="group-bd">
				<view class="beijing">
					<view class="bj-title">
						<text>实名认证安全保障</text>
					</view>
				</view>
				<view class="kongge"></view>
				<!-- 上传照片 -->
				<view class="image-upload">
					<view class="title d-s-c">
						<text class="f30 liln-h-40">上传证件</text>
					</view>
					<view class="mt50">
						<view class=" d-a-c">
							<view class="d-f d-c pr" @click="changeAvatarUrl">
								<view class="pr" style="height: 148rpx;width: 220rpx;">
									<image style="width: 220rpx;height: 148rpx;" v-if="formData.sfzpositive == ''" src="../../../static/hha/32.png" mode="aspectFit">
									</image>
									<image v-else class="pa rotate_90_proc" :src="formData.sfzpositive" mode="aspectFit"></image>
								</view>
								<view class="d-c-c mt20 white"
									style="width: 220rpx;height: 36rpx;background: linear-gradient(90deg, #AEE4E6 0%, #04C8BE 50%, #B6E6E7 100%);">
									<text>上传正面</text>
								</view>
							</view>
							<view class="d-f d-c pr" @click="changeAvatarUrl1">
								<view class="pr" style="height: 148rpx;width: 220rpx;">
									<image v-if="formData.sfzback == ''"  style="width: 220rpx;height: 148rpx;" src="../../../static/hha/33.png" mode="aspectFit">
									</image>
									<image v-else class="pa rotate_90_proc" :src="formData.sfzback"  mode="aspectFit">
									</image>
								</view>
								<view class="d-c-c mt20 white"
									style="width: 220rpx;height: 36rpx;background: linear-gradient(90deg, #AEE4E6 0%, #04C8BE 50%, #B6E6E7 100%);">
									<text>上传反面</text>
								</view>
							</view>
						</view>
						<view class="d-s-s " style="width: 638rpx;height: 60rpx; margin: 50rpx auto 0;">
							<u-icon name="info-circle" color="#04C8BE"></u-icon>
							<text style="font-size: 22rpx;font-weight: 500;color: #A7A7A7;line-height: 30rpx;">
								实名认证（如果暂无照片可先传任意照片，审核通过后补传即
								可）如果上传无效或失败，重新进入该页面上传即可
							</text>
						</view>
					</view>
				</view>
				<!-- <view>
					<view class="shimingrenzhng">
						实名认证 (如暂无照片，可先传任意照片，审核通过后补传既可)
						<view style="margin-top: 20rpx;">
							如遇上传无效或失败，重新进入该页面上传即可
						</view>
					</view>
				</view>
				<view class="shenfen">点击下面方框上传身份证正面照:</view>
				<view class="diyige" >
					<image src="../../../static/hha/add.png"  class="jiahao"></image>
					<image style="width: 320rpx;height: 180rpx;" :src="formData.sfzpositive"
						v-model="formData.sfzpositive" class="dingwei"></image>
				</view>
				<view class="shenfen">点击下面方框上传身份证反面照:</view>
				<view class="diyige" >
					<image src="../../../static/hha/add.png" v-if="formData.sfzback == ''" class="jiahao"></image>
					<image style="width: 320rpx;height: 180rpx;" v-model="formData.sfzback"
						class="dingwei"></image>
				</view> -->
				<!-- 上传图片 -->
				<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>
				<!-- 上传图片 -->
				<Uploads v-if="isUpload1" @getImgs="getImgsFunc1"></Uploads>
			</view>
		</view>

		<view><button type="default" @click="formSubmit" class="tijiao">提交</button></view>
	</view>
</template>

<script>
	import Upload from '@/components/upload/uploadOne.vue';
	import Uploads from '@/components/upload/uploadOne.vue';
	export default {
		components: {
			Upload,
			Uploads,
		},
		data() {
			return {
				bgColor:'#00C8BE',
				loading: true,
				username: "",
				usernum: "",
				image: '',
				userInfo: {},
				isUpload: false,
				ad: true,
				as: true,
				isUpload1: false,
				/*表单数据对象*/
				formData: {
					/*手机号*/
					mobile: '',
					/*验证码*/
					code: '',
					sfzpositive: '',
					sfzback: ''
				},

			};
		},
		onLoad() {
			let self = this;
			self._get(
				'user.index/detail', {},
				function(res) {
					// console.log(res.data.userInfo.sfzpositive, "身份证上传成功返回");
					// console.log(res.data.userInfo.sfzback, "身份证上传成功返回");
					if (res.data.userInfo.sfzpositive) {
						self.formData.sfzpositive = res.data.userInfo.sfzpositive;
					}
					if (res.data.userInfo.sfzback) {
						self.formData.sfzback = res.data.userInfo.sfzback;
					}
				}
			);
		},
		mounted() {
			let self = this
			uni.getStorageSync('username');
			uni.getStorageSync('usernum');
			// console.log(uni.getStorageSync('username'))	
			// console.log(uni.getStorageSync('usernum'))	
			self.username = uni.getStorageSync('username')
			self.usernum = uni.getStorageSync('usernum')

		},
		methods: {
			/*获取上传的图片正面*/
			getImgsFunc(e) {
				let self = this;
				if (e && typeof(e) != 'undefined') {
					self.userInfo.avatarUrl = e[0].file_path;
					self.formData.sfzpositive = self.userInfo.avatarUrl;
					self.isUpload = false;
					// self.ad=false;
				}
			},

			/* 修改头像 */
			changeAvatarUrl() {
				let self = this;
				self.isUpload = true;
			},
			/*获取上传的图片反面*/
			getImgsFunc1(e) {
				let self = this;
				if (e && typeof(e) != 'undefined') {
					self.userInfo.sfzback = e[0].file_path;
					self.formData.sfzback = self.userInfo.sfzback;
					self.isUpload1 = false;
					// self.as=false;
				}
			},

			/* 修改头像 */
			changeAvatarUrl1() {
				let self = this;
				self.isUpload1 = true;
			},

			/*提交*/
			formSubmit() {
				let self = this;
				self.loading = true;

				if (!self.formData.sfzback || !self.formData.sfzback) {
					uni.showToast({
						title: '请将身份证上传完整!!',
						duration: 2000
					});

					return
				}

				uni.showLoading({
					title: '正在提交'
				});
				self._post(
					'user.user/realNameAuthentication', {
						username: self.username,
						usernum: self.usernum,
						//sfz正面
						sfzpositive: self.formData.sfzpositive,
						//sfz反面
						sfzback: self.formData.sfzback
					},
					function(res) {
						console.log(res, "请求成功返回");
						if (res.code == 1) {
							uni.showToast({
								title: '绑定成功',
								duration: 2000
							});
							self.loading = false;
							setTimeout(function() {
								// 执行回调函数
								// uni.navigateBack();
								uni.redirectTo({
									url: "/pages/user/emergency"
								})
							}, 2000);
						} else {
							uni.showToast({
								title: '绑定失败',
								duration: 2000
							});
						}
					})
			}
		}
	};
</script>


<style lang="scss" scoped>
	.login-container {
		background: #f1f4f6;
	}

	.rotate_90_proc {
		height: 220rpx;
		width: 148rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(90deg);
	}

	.login-container input {
		height: 88rpx;
		line-height: 88rpx;
	}

	.wechatapp {
		padding: 80rpx 0 48rpx;
		border-bottom: 1rpx solid #e3e3e3;
		margin-bottom: 72rpx;
		text-align: center;
	}

	.wechatapp .header {
		width: 190rpx;
		height: 190rpx;
		border: 2px solid #fff;
		margin: 0rpx auto 0;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 1px 0px 5px rgba(50, 50, 50, 0.3);
	}

	.auth-title {
		color: #585858;
		font-size: 34rpx;
		margin-bottom: 40rpx;
	}

	.auth-subtitle {
		color: #888;
		margin-bottom: 88rpx;
		font-size: 28rpx;
	}

	.login-btn {
		padding: 0 20rpx;
	}

	.login-btn button {
		height: 88rpx;
		line-height: 88rpx;
		background: #04be01;
		color: #fff;
		font-size: 30rpx;
		border-radius: 999rpx;
		text-align: center;
	}

	.no-login-btn {
		margin-top: 20rpx;
		padding: 0 20rpx;
	}

	.no-login-btn button {
		height: 88rpx;
		line-height: 88rpx;
		background: #dfdfdf;
		color: #fff;
		font-size: 30rpx;
		border-radius: 999rpx;
		text-align: center;
	}

	.get-code-btn {
		width: 200rpx;
		height: 80rpx;
		line-height: 76rpx;
		padding: 0rpx 30rpx;
		border-radius: 40rpx;
		white-space: nowrap;
		border: 1rpx solid $dominant-color;
		color: $dominant-color;
		font-size: 30rpx;
	}

	.get-code-btn[disabled='true'] {
		border: 1rpx solid #cccccc;
	}

	.btns button {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 34rpx;
		border-radius: 45rpx;
		background: $dominant-color;
		color: #ffffff;
	}

	.beijing {
		width: 750rpx;
		height: 796rpx;
		background: linear-gradient(180deg, #00C8BE 0%, rgba(24, 192, 199, 0) 100%);

		.bj-title {
			padding: 78rpx 0  0 40rpx ;
			width: 352rpx;
			height: 44rpx;
			font-size: 44rpx;
			color: #FFFFFF;
			line-height: 44rpx;
			font-weight: bold;
		}
	}

	.image-upload {
		margin: -460rpx auto 0;
		width: 702rpx;
		height: 504rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.title {
			padding: 0 30rpx;
			height: 100rpx;
			background: #E8ECF6;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
		}
	}


	.shimingrenzhng {
		color: #43A3E8;
		text-align: center;
	}

	.diyige {
		background-color: white;
		width: 100%;
		height: 300rpx;
		border-radius: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.jiahao {
		border-radius: 50rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.kongge {
		height: 30rpx;
	}


	.shenfen {
		margin-top: 70rpx;
		text-align: center;
		color: red;
		padding: 10rpx 0;
	}

	.tijiao {
		margin: 50rpx auto 0;
		width: 582rpx;
		height: 88rpx;
		background: linear-gradient(360deg, #05C8BE 0%, #6FD9D7 100%);
		border-radius: 44rpx;
		line-height: 88rpx;
		color: #FFFFFF;
	}
</style>